<html>

<head>
  <title>模型对象旋转平移缩放变换</title>
  <style>
    body {
      margin: 0;
    }

    canvas {
      display: block;
    }
  </style>
</head>

<body>
  <script src="./js/three.js"></script>
  <script src="./js/OrbitControls.js"></script>
  <script>
    // 1、创建场景
    var scene = new THREE.Scene();

    //创建一个球体几何对象
    var geometry = new THREE.SphereGeometry(100, 25, 25);
    // ==============================================================================================================
    // 材质对象
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    // 网格模型对象Mesh
    var mesh = new THREE.Mesh(geometry, material);

    // ==============================================================================================================
    // 网格模型xyz方向分别缩放0.5,1.5,2倍
    mesh.scale.set(0.5, 1.5, 2)
    // x轴方向放大2倍
    mesh.scale.x = 2.0;

    // ==============================================================================================================
    // 位置属性.position
    // 模型位置.position属性和.scale属性的属性值一样也是三维向量对象Vector3，通过模型位置属性.position可以设置模型在场景Scene中的位置。模型位置.position的默认值是THREE.Vector3(0.0,0.0,0.0)。
    // 设置网格模型y坐标
    mesh.position.y = 80;
    // 设置模型xyz坐标
    mesh.position.set(80, 2, 10);

    // ==============================================================================================================
    // 平移
    // 网格模型沿着x轴正方向平移100，可以多次执行该语句，每次执行都是相对上一次的位置进行平移变换。
    // 等价于mesh.position = mesh.position + 100;
    mesh.translateX(100);//沿着x轴正方向平移距离100
    // 沿着Z轴负方向平移距离50。
    mesh.translateZ(-50);
    // 沿着自定义的方向移动。
    //向量Vector3对象表示方向
    var axis = new THREE.Vector3(1, 1, 1);
    axis.normalize(); //向量归一化
    //沿着axis轴表示方向平移100
    mesh.translateOnAxis(axis, 100);
    // 执行.translateX()、.translateY()、.translateOnAxis()等方法本质上改变的都是模型的位置属性.position。

    // ==============================================================================================================
    // 旋转
    // 立方体网格模型绕立方体的x轴旋转π/4，可以多次执行该语句，每次执行都是相对上一次的角度进行旋转变化
    mesh.rotateX(Math.PI / 4);//绕x轴旋转π/4
    // 网格模型绕(0,1,0)向量表示的轴旋转π/8
    var axis = new THREE.Vector3(0, 1, 0);//向量axis
    mesh.rotateOnAxis(axis, Math.PI / 8);//绕axis轴旋转π/8
    // 模型的角度属性.rotation和四元数属性.quaternion都是表示模型的角度状态，只是表示方法不同，.rotation属性值是欧拉对象Euler,.quaternion属性值是是四元数对象Quaternion
    // 绕着Y轴旋转90度
    mesh.rotateY(Math.PI / 2);
    //控制台查看：旋转方法，改变了rotation属性
    console.log(mesh.rotation);

    scene.add(mesh);








    // 3、光源设置：
    //环境光    环境光颜色与网格模型的颜色进行RGB进行乘法运算
    var ambient = new THREE.AmbientLight('#444444');
    scene.add(ambient);

    //点光源  
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300);
    scene.add(point);


    // 4、添加相机
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.z = 5;
    //设置相机位置
    camera.position.set(200, 300, 200);
    //设置相机方向(指向的场景对象)
    camera.lookAt(scene.position);


    // 5、创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement);

    // 6、执行渲染操作
    var animate = function () {
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.01;
    };
    animate();
    var controls = new THREE.OrbitControls(camera);//创建控件对象
  </script>
</body>

</html>